<template>
  <!-- 页面-角色管理-查看详情-基本信息组件 -->
  <div class="sidelip-box">
    <Form :model="formInfo" ref="formRole" class="ivu-form-no-margin-bottom" :label-width="90">
      <Row :gutter="32" class="code-row-bg">
        <!-- 角色编码 -->
        <Col span="12" style="border: none;">
          <Form-item prop="roleCode" :label="$t('module.role.roleCode')">
            <Input
              placeholder
              
              v-model.trim="formInfo.roleCode"
              :maxlength="50"
              style="width: 100%;"
              disabled
            ></Input>
          </Form-item>
        </Col>
        <!-- 角色名称 -->
        <Col span="12" style="border: none;">
          <Form-item prop="roleName" :label="$t('module.role.roleName')">
            <Input
              placeholder
              
              v-model="formInfo.roleName"
              :maxlength="50"
              style="width: 100%;"
              disabled
            ></Input>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg">
        <!-- 角色类型 -->
        <Col span="12" style="border: none;">
          <Form-item prop="roleType" :label="$t('module.role.roleType')">
            <Select v-model="formInfo.roleType" style="width: 100%;"  disabled>
              <Option
                v-for="roleType in roleTypeList"
                :value="Number(roleType.vsiKey)"
                :key="Number(roleType.vsiKey)"
                >{{ roleType.vsiValue }}</Option
              >
            </Select>
          </Form-item>
        </Col>
        <!-- 状态 -->
        <Col span="12" style="border: none;">
          <Form-item prop="enabled" :label="$t('common.status')">
            <RadioGroup v-model="formInfo.enabled" size="small">
              <Radio :label="1" disabled>
                <span>{{ $t("common.enable") }}</span>
              </Radio>
              <Radio :label="0" disabled>
                <span>{{ $t("common.disable") }}</span>
              </Radio>
            </RadioGroup>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg">
        <!-- 生效日期 -->
        <Col span="12" style="border: none;">
          <Form-item prop="effectBegin" :label="$t('module.role.effectBeginTime')">
            <DatePicker
              type="date"
              ref="effectBegin"
              :placeholder="$t('module.role.selectDate')"
              :value="formInfo.effectBegin"
              :transfer="true"
              :editable="false"
              :clearable="false"
              placement="bottom-end"
              style="width: 100%;"
              
              disabled
            ></DatePicker>
          </Form-item>
        </Col>
        <!-- 失效日期 -->
        <Col span="12" style="border: none;">
          <Form-item prop="effectEnd" :label="$t('module.role.effectEndTime')">
            <DatePicker
              type="date"
              ref="effectEnd"
              :placeholder="$t('module.role.permanent')"
              :value="formInfo.effectEnd"
              :transfer="true"
              :editable="false"
              :clearable="false"
              placement="bottom-end"
              style="width: 100%;"
              
              disabled
            ></DatePicker>
          </Form-item>
        </Col>
      </Row>
      <!-- 描述 -->
      <Form-item :label="$t('common.describe')">
        <Input
          placeholder
          type="textarea"
          :rows="4"
          
          v-model="formInfo.remark"
          :maxlength="100"
          style="width: 100%;"
          disabled
        ></Input>
      </Form-item>
    </Form>
  </div>
</template>
<script>
import valueSetAPI from "@/api/valueSetAPI.js";
import locales from "./locales.js";
export default {
  name: "RoleDetailInfo",
  mixins: [locales],
  components: {},
  props: {
    rowList: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      formInfo: {
        roleName: "",
        remark: "",
        id: "",
        effectBegin: "",
        effectEnd: "",
        // effectDate: [],
        roleCode: "",
        roleType: 1,
        // tenantCode: null,
        // treeNodeId: null,
        // treeNodeName: null,
        enabled: 1
      },
      roleTypeList: [],
      actions: [
        // {
        //   text: this.$t("common.close"),
        //   theme: "primary",
        //   handle: () => {
        //     this.$emit("Close");
        //   }
        // }
      ]
    };
  },
  created: function () {
    this.$emit("SetTitle", this.$t("module.role.viewDetail"));
    this.$emit("SetPageWidth", 700);
    this.$emit("SetPageActions", this.actions);
  },
  mounted: function () {
    this.init();
  },
  methods: {
    init() {
      this.formInfo = Object.assign(this.rowList, {
        effectBegin: this.formatDateTime(this.rowList.effectBegin),
        effectEnd: this.rowList.effectEnd == null ? "" : this.formatDateTime(this.rowList.effectEnd)
      });
      this.initRoleType();
    },
    // 初始化角色类型
    initRoleType() {
      valueSetAPI.getValueSetByCode("ROLE_TYPE").then(data => {
        this.roleTypeList = data;
      });
    },
    // 补零
    addZero(num) {
      return num < 10 ? "0" + num : num;
    },
    // 格式化时间
    formatDateTime(date) {
      var time = new Date(Date.parse(date));
      time.setTime(time.setHours(time.getHours() + 8));
      var Y = time.getFullYear() + "-";
      var M = this.addZero(time.getMonth() + 1) + "-";
      var D = this.addZero(time.getDate()) + " ";
      var h = this.addZero(time.getHours()) + ":";
      var m = this.addZero(time.getMinutes()) + ":";
      var s = this.addZero(time.getSeconds());
      return Y + M + D;
    }
  }
};
</script>
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding-right: 8px;
}
</style>
